<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: red;
        }
    </style>
    <script>
        // DOM操作是浏览器提供的一套页面标签的操作语法
        //      能够通过该语法完成JS的逻辑功能运算和页面元素的交互操作

        document.write("字符串"); // 直接将字符串文本写入页面
        
        // 窗口对象
        console.log(window);

        // 所有DOM操作基于基础对象document而来
        // document 对象 是浏览器内置提供的用于描述当前页面的整个文档对象
        console.log( document );
        // 获取页面中的body元素
        console.log( document.body );

        // 1. dom 的查询和获取 => 必须在页面显示完成后才能获取到对应元素
        //    通过 document 对象提供的专用方法进行数据查询
        // querySelector( selectors )	返回与文档中指定的 CSS 选择器匹配的第一个元素。
        // querySelectorAll( selectors )	返回包含与文档中指定的 CSS 选择器匹配的所有元素的静态 NodeList。 
        //      参数 selectors 字符串定义规则 被称为 el 查询器
        //                    el => element select => 就是CSS样式选择器
        
        // let h1Dom = document.querySelector( "h1" ); // 基于标签进行查询
        // console.log(h1Dom); // null

        // onload 提供一个监控功能，监控窗口中的资源加载完成
        //        属性取值 是一个 方法，该方法会在窗口资源加载完成后调用
        window.onload = function(){
            console.log("窗口加载完成");
            let h1Dom = document.querySelector( "h1" ); // 基于标签进行查询
            console.log(h1Dom); // 加载第一个H1标签
        }
    </script>
</head>
<body>
    <h1>标题标签</h1>
    <h1 class="a">标题标签</h1>
    <h1>标题标签</h1>
    <h1 id="title">标题标签</h1>
    <h1>标题标签</h1>
    <h1 class="a">标题标签</h1>

    <script>
        let h1Dom1 = document.querySelector( "h1" ); // 基于标签进行查询
        console.log(h1Dom1); 

        // 返回的是一个 类数组数据
        //      该格式数据，不能调用JS数组的内置方法，但可以循环
        let h1List = document.querySelectorAll( "h1" ); // 基于标签进行查询
        console.log(h1List); 
        // h1List.sort();
        for (let i = 0; i < h1List.length; i++) {
            console.log( h1List[i] );
        }

        let titleDom = document.querySelector( "#title" );
        console.log(titleDom); 

        let h1List1 = document.querySelectorAll( ".a" );
        console.log(h1List1); 

        for (let i = 0; i < h1List1.length; i++) {
            // innerHTML 是JS中查询的DOM对象的内置属性，替换标签内容
            h1List1[i].innerHTML = Math.random();
        }
    </script>
</body>
</html>